// 水平居中
#horizontal-center {
  margin-left: auto;
  margin-right: auto;
}

// 浮动与重置浮动
#float(@side: left) {
  float: @side; // @if $legacy-support-for-ie {
  //     _display: inline;
  // }
}

//左浮动 
#pull-left {
  #float(left)
}

//右浮动 
#pull-right {
  #float(right)
}

// display:inline-block
#dib() {
  display: inline-block;
  *display: inline;
  *zoom: 1;
}

// 文本溢出显示省略号
#text-overflow{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap
}

#animation(@str) {
  -webkit-animation: @str;
  -moz-animation: @str;
  -ms-animation: @str;
  -o-animation: @str;
  animation: @str;
}

// Transitions
#transition(@args) {
  -webkit-transition: @args;
  -moz-transition: @args;
  -ms-transition: @args;
  -o-transition: @args;
  transition: @args;
}

// 圆角边框
#border-radius(@radius) {
  -webkit-border-radius: @radius !important;
  -moz-border-radius: @radius !important;
  -ms-border-radius: @radius !important;
  border-radius: @radius !important;
}

// 不换行
#no-wrap() {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

// 定义全局类:.border-1px;期望根据不同dpi去缩放,使用@media实现.
// 最小dpi为1.5的设备进行相关设置:1.5*0.7~1
@media (-webkit-min-device-pixel-ratio:1.5),
(min-device-pixel-ratio:1.5) {
  .border-1px {
    &::after {
      -webkit-transform: scaleY(0.7);
      transform: scaleY(0.7)
    }
  }
}

@media (-webkit-min-device-pixel-ratio:2),
(min-device-pixel-ratio:2) {
  .border-1px {
    &::after {
      -webkit-transform: scaleY(0.5);
      transform: scaleY(0.5)
    }
  }
}

// 顶部1px边框
//定义一个混合器,用于多次复用.
#borderTop-1px(@color) {
  // 用于伪类的定位
  position: relative;
  &:before {
    //定义一个伪类,将它置于元素的底部.
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    border-bottom: 1px solid @color;
    content: ' ';
  }
}

// 底部1px边框
//定义一个混合器,用于多次复用.
#borderBottom-1px(@color) {
  // 用于伪类的定位
  position: relative;
  &:before {
    //定义一个伪类,将它置于元素的底部.
    display: block;
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    border-top: 1px solid @color;
    content: ' ';
  }
}

// 左边1px边框
//定义一个混合器,用于多次复用.
#borderLeft-1px(@color) {
  // 用于伪类的定位
  position: relative;
  &:before {
    //定义一个伪类,将它置于元素的底部.
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    border-right: 1px solid @color;
    content: ' ';
  }
}

#borderRight-1px(@color) {
  // 用于伪类的定位
  position: relative;
  &:before {
    //定义一个伪类,将它置于元素的底部.
    display: block;
    position: absolute;
    right: 0;
    top: 0;
    height: 100%;
    border-right: 1px solid @color;
    content: ' ';
  }
}

#borderNone() {
  // 用于伪类的定位
  position: relative;
  &:before {
    //定义一个伪类,将它置于元素的底部.
    display: block;
    position: absolute;
    right: 0;
    top: 0;
    height: 100%;
    border: none;
    content: ' ';
  }
}

// 背景颜色渐变
#linear-gradient(@from, @to) {
  /* Fallback for sad browsers */
  background-color: @to;
  /* Mozilla Firefox */
  background-image: -moz-linear-gradient(@from, @to);
  /* Opera */
  background-image: -o-linear-gradient(@from, @to);
  /* WebKit (Safari 4+, Chrome 1+) */
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, @from), color-stop(1, @to));
  /* WebKit (Chrome 11+) */
  background-image: -webkit-linear-gradient(@from, @to);
  /* IE10 */
  background-image: -ms-linear-gradient(@from, @to);
  /* W3C */
  background-image: linear-gradient(@from, @to);
}

// 背景图片
#bg-image(@url){
  background-image: url("../images/@{url}@2x.png");
  @media (-webkit-min-device-pixel-ratio: 3),(min-device-pixel-ratio: 3){
    background-image: url("../images/@{url}@3x.png");
  }
}

// 阴影
#box-shadow(@h-shadow: 0, @v-shadow: 0, @blur: 1px, @color: #ccc) {
  -moz-box-shadow: @arguments;
  -webkit-box-shadow:  @arguments;
  box-shadow:  @arguments;
}
